<template>
	<view>
		<!-- 搜索 -->
		<div class="searchBar" offset-top="80">
			<u-search @custom="custom" placeholder="请输入搜索内容" search-icon-color="#B7B5B5" placeholder-color="#B7B5B5"
				v-model="search" height="80"></u-search>
		</div>
		<!-- 城市列表 -->
		<u-index-list :scrollTop="scrollTop">
			<view v-for="(item, index) in cityList" :key="index">
				<u-index-anchor :index="item.letter" />
				<view class="list-cell" v-for="i in item.data" :key="i.id" @click="getCityValue(i)">{{ i.name }}</view>
			</view>
		</u-index-list>
	</view>
</template>

<script>
export default {
	data() {
		return {
			from: '',
			search: '',
			scrollTop: 0,
			cityList: [],
		};
	},
	created() {
		this.getCity();
	},
	onLoad(options) {
		this.from = options.from;
	},

	methods: {
		custom() {
			if (this.search.length === 0) {
				this.$u.toast('请输入搜索内容')

			} else {
				this.getCity()
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		getCity() {
			this.$u.api.get_city({ search: this.search }).then(res => {
				this.cityList = res.data.data;
			});
		},
		getCityValue(value) {
			this.value = value
			if (this.from === 'revise') {
				let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.form.city_name = value.name;
				prevPage.$vm.form.city_id = value.id;
				uni.navigateBack({
					delta: 1
				});
			} else {
				this.show = true
			}

		},
	}
};
</script>

<style lang="scss" scoped>
.history {
	.list {
		@include flex;

		.item {
			margin-left: 20rpx;
		}
	}
}

.title {
	margin: 20rpx;
	color: #232323;
	font-weight: bold;
	font-size: 28rpx;
}

.list {
	@include flex;

	.item {
		font-size: 26rpx;
		margin: 20rpx 20rpx 30rpx;
		@include flex($justify: center, $aligin: center);
		color: #666666;
		// width: 158rpx;
		padding: 0 20rpx;
		height: 68rpx;
		background: #f8f8f8;
		border-radius: 34rpx;
	}
}


.searchBar {
	margin: 20rpx;
}

.list-cell {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 24rpx;
	overflow: hidden;
	color: #323233;
	font-size: 14px;
	line-height: 24px;
	background-color: #fff;
}

::v-deep .u-index-bar__sidebar {
	top: 55%;
}
</style>
